<template>
  <div id="contractsTerms">
    <div class="messageSwdy">应收账款</div>
    <div class="tableBox">
      <table class="vertatic">
        <tr>
          <td>应收款序号</td>
          <td>供应商</td>
          <td>应收款金额</td>
          <td>融资金额</td>
          <td>应收款到期日</td>
          <td>状态</td>
        </tr>
        <tr>
          <td>{{yingshouData.receiveId}}</td>
          <td>{{yingshouData.supplyCompany}}</td>
          <td>{{yingshouData.receiveAmount}}</td>
          <td>{{yingshouData.financeAmount}}</td>
          <td>{{yingshouData.endDate}}</td>
          <td>{{yingshouData.state}}</td>
        </tr>
      </table>
    </div>
    <div class="messageSwdy">合同条款</div>
    <div class="tableBox">
      <table class="leave">
        <tr>
          <td>供应商联系人</td>
          <td>
            <el-input size="small" v-model="data.supplyContact"></el-input>
          </td>
        </tr>
        <tr>
          <td>供应商曾用名</td>
          <td>
            <el-input size="small" v-model="data.supplyUsedName"></el-input>
          </td>
        </tr>
        <tr>
          <td>供应商法人</td>
          <td>
            <el-input size="small" v-model="data.supplyLegalPerson"></el-input>
          </td>
        </tr>
        <tr>
          <td>保理商联系人</td>
          <td>
            <el-input size="small" v-model="data.factorContact"></el-input>
          </td>
        </tr>
        <tr>
          <td>保理商联系人地址</td>
          <td class="dizhi">
            <el-select v-model="shengvalue" placeholder="请选择" size="small" @change="changeSheng">
              <el-option v-for="item in shengOption" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="shivalue" placeholder="请选择" size="small">
              <el-option v-for="item in shiOption" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-input size="small" placeholder="请选择并输入地址" v-model="blsAddress" @blur="addreblur"></el-input>
          </td>
        </tr>
        <tr>
          <td>保理商联系人电话</td>
          <td>
            <el-input size="small" v-model="data.factorPhone"></el-input>
          </td>
        </tr>
        <tr>
          <td>保理商联系人传真</td>
          <td>
            <el-input size="small" v-model="data.factorFax"></el-input>
          </td>
        </tr>
        <tr>
          <td>保理商银行账号</td>
          <td>
            <el-input size="small" v-model="data.factorAccount"></el-input>
          </td>
        </tr>
        <tr>
          <td>保理商账户名称</td>
          <td>
            <el-input size="small" v-model="data.factorAccountName"></el-input>
          </td>
        </tr>
        <tr>
          <td>保理商开户银行</td>
          <td>
            <el-input size="small" v-model="data.factorBankName"></el-input>
          </td>
        </tr>
        <tr>
          <td>保理商法人</td>
          <td>
            <el-input size="small" v-model="data.factorLegalPerson"></el-input>
          </td>
        </tr>
        <tr>
          <td>保理商注册地址</td>
          <td class="dizhi bb">
            <el-select v-model="shengvalue2" placeholder="请选择" size="small" @change="changeSheng2">
              <el-option v-for="item in shengOption" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="shivalue2" placeholder="请选择" size="small">
              <el-option v-for="item in shiOption2" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-input size="small" placeholder="请选择并输入地址" v-model="blsaddresszc" @blur="blsaddBlur"></el-input>
          </td>
        </tr>
        <tr>
          <td>供应商注册地址</td>
          <td class="dizhi">
            <el-select v-model="shengvalue1" placeholder="请选择" size="small" @change="changeSheng1">
              <el-option v-for="item in shengOption" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="shivalue1" placeholder="请选择" size="small">
              <el-option v-for="item in shiOption1" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-input size="small" placeholder="请选择并输入地址" v-model="gysAddress" @blur="gysaddBlur"></el-input>
          </td>
        </tr>
        <tr>
          <td>放款日期</td>
          <td class="riqi">
            <el-date-picker  type="date" placeholder="选择日期" size="small" v-model="data.loanDate"></el-date-picker>
          </td>
        </tr>
      </table>
    </div>
    <div class="messageSwdy">保理主合同</div>
    <div class="tableBox">
      <table class="leave">
        <tr>
          <td>合同签订日期</td>
          <td class="riqi">
            <el-date-picker  type="date" placeholder="选择日期" size="small" v-model="data.signDate"></el-date-picker>
          </td>
        </tr>
        <tr>
          <td>合同有效期（天）</td>
          <td>
            <el-input size="small" v-model="data.effectDays"></el-input>
          </td>
        </tr>
        <tr>
          <td>合同到期日</td>
          <td class="riqi">
            <el-date-picker  type="date" placeholder="选择日期" size="small" v-model="data.endDate"></el-date-picker>
          </td>
        </tr>
        <tr>
          <td>质保金金额</td>
          <td>
            <el-input size="small" v-model="data.ensureAmount"></el-input>
          </td>
        </tr>
        <tr>
          <td>质保金比例</td>
          <td>
            <el-input size="small" v-model="data.ensureRate"></el-input>
          </td>
        </tr>
      </table>
    </div>
    <div class="bottomBtn">
      <button @click="nextStep">下一步</button>
    </div>
  </div>
</template>

<script>
import cityData from "../../assets/js/city.js";
export default {
  name: "contractsTerms",
  data() {
    return {
      city: "",
      shengvalue: "",
      shengvalue1: "",
      shengOption: [],
      shivalue: "",
      shivalue1: "",
      shiOption: [],
      shiOption1: [],
      shiOption2: [],
      value1: '',
      blsAddress: '',
      blsRaddress: '',
      gysAddress: '',
      blsaddresszc: '',
      shengvalue2: '',
      shivalue2: '',
      data: {
        templateId: '', // 是 string 合同模板id 
        receiveId: String(this.$route.query.id), // 是 string 应收账款信息Id 
        supplyContact: '', // 是 string 供应商联系人 
        supplyUsedName: '', // 是 string 供应商曾用名 
        supplyLegalPerson: '', // 是 string 供应商法人 
        factorContact: '', // 是 string 保理商联系人 
        factorAddress: '', // 是 string 保理商联系人地址 
        factorPhone: '', // 是 string 保理商联系人电话 
        factorFax: '', // 是 string 保理商联系人传真 
        factorAccount: '', // 是 string 保理商银行账号 
        factorAccountName: '', // 是 string 保理商账户名称 
        factorBankName: '', // 是 string 保理商开户银行 
        factorLegalPerson: '', // 是 string 保理商法人 
        factorRegisterAddress: '', // 是 string 保理商注册地址 
        supplyRegisterAddress: '', // 是 string 供应商注册地址 
        loanDate: '', // 是 Date 放款日期 
        signDate: '', // 是 Date 合同签订日期 
        effectDays: '', // 是 string 合同有效期（天） 
        endDate: '', // 是 Date 合同到期日 
        ensureAmount: '', // 是 string 质保金金额 
        ensureRate: '', // 是 string 质保金比例 
      },
      yingshouData: {},
    };
  },
  mounted() {
    this.getsheng();
    this.showReceiveInfo();
  },
  methods: {
    nextStep() {
      sessionStorage.setItem('nextdata', JSON.stringify(this.data));
      this.$router.push('contractsTermsFile');
    },
    showReceiveInfo() {
      this.axios.get('AdminAPI/projectContract/showReceiveInfo',{params: {receiveId: this.$route.query.id}})
        .then(({data})=> {
          this.yingshouData = data.data;
        })
    },
    blsaddBlur() {
      if (this.blsaddresszc && this.shengvalue2 && this.shivalue2) {
        this.data.factorRegisterAddress = this.shengvalue2 + "&&" + this.shivalue2 + "&&" + this.blsaddresszc;
      }
    },
    gysaddBlur() {
      if (this.gysAddress && this.shengvalue1 && this.shivalue1) {
        this.data.supplyRegisterAddress = this.shengvalue1 + "&&" + this.shivalue1 + "&&" + this.gysAddress;
      }
    },
    addreblur() {
      if (this.blsAddress && this.shengvalue && this.shivalue) {
        this.data.factorAddress = this.shengvalue + "&&" + this.shivalue + "&&" + this.blsAddress;
      }
    },
    getsheng() {
      let data = cityData[86];
      let shengOption = [];
      for (let k in data) {
        shengOption.push(data[k]);
      }
      this.shengOption = shengOption;
    },
    changeSheng() {
      this.shivalue = "";
      let data = cityData[86];
      let shengKey = "";
      for (let k in data) {
        if (data[k] == this.shengvalue) {
          shengKey = k;
        }
      }
      let shidata = cityData[shengKey];
      let shiOption = [];
      for (let k in shidata) {
        shiOption.push(shidata[k]);
      }
      this.shiOption = shiOption;
    },
    changeSheng1() {
      this.shivalue1 = "";
      let data = cityData[86];
      let shengKey = "";
      for (let k in data) {
        if (data[k] == this.shengvalue1) {
          shengKey = k;
        }
      }
      let shidata = cityData[shengKey];
      let shiOption = [];
      for (let k in shidata) {
        shiOption.push(shidata[k]);
      }
      this.shiOption1 = shiOption;
    },
    changeSheng2() {
      this.shivalue2 = "";
      let data = cityData[86];
      let shengKey = "";
      for (let k in data) {
        if (data[k] == this.shengvalue2) {
          shengKey = k;
        }
      }
      let shidata = cityData[shengKey];
      let shiOption = [];
      for (let k in shidata) {
        shiOption.push(shidata[k]);
      }
      this.shiOption2 = shiOption;
    }
  }
};
</script>

<style lang="scss">
#contractsTerms {
  .messageSwdy {
    margin-top: 0 !important;
    position: relative;
    .bianji {
      position: absolute;
      right: 110px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      font-weight: 400;
      color: rgba(230, 69, 69, 1);
      cursor: pointer;
    }
  }
  .tableBox {
    background: white;
    padding: 48px 76px;
    .leave {
      width: 100%;
      border-collapse: collapse;
      color: #333333;
      tr {
        td {
          text-align: center;
          border: 1px solid #dfdcdf;
          padding: 8px 10px;
          &:nth-child(odd) {
            background: #fffaf3;
          }
          &.dizhi {
            display: flex;
            border: none;
            border-right: 1px solid #dfdcdf;
            &.bb {
              border-bottom: 1px solid #dfdcdf;
            }
            .el-select {
              margin-right: 20px;
            }
          }
          &.riqi {
            text-align: left;
          }
        }
      }
    }
    .vertatic {
      width: 100%;
      border-collapse: collapse;
      color: #333333;
      tr {
        &:first-child {
          td {
            background: #fffaf3;
          }
        }
        td {
          text-align: center;
          border: 1px solid #dfdcdf;
          padding: 16px 0;
          .red {
            color: #e64545;
            cursor: pointer;
          }
        }
      }
    }
  }
  .bottomBtn {
    text-align: center;
    padding: 30px 0;
    button {
      width: 632px;
      height: 50px;
      background: rgba(242, 146, 7, 1);
      box-shadow: 0px 0px 6px 0px rgba(122, 121, 121, 0.5);
      border-radius: 10px;
      cursor: pointer;
      font-size: 22px;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
